<template>
  <div class="left">
    <div class="row1">
      <div class="title_name">
        <span>产业介绍</span><span class="eng">Industry introduction</span>
      </div>
      <div class="tab_box">
        <div class="tab_title">链路概括</div>
        <div class="item_box">
          <div class="item_bar">
            <img class="item_img" src="../../public/img/ldc.png" alt="" />
            <div class="item_name">锂电池 链路完善</div>
          </div>
          <div class="item_bar">
            <img class="item_img" src="../../public/img/dj.png" alt="" />
            <div class="item_name">电机 链路完善</div>
          </div>
        </div>
      </div>
      <div class="tab_box">
        <div class="tab_title">重点发展方向</div>
        <div class="item_box">
          <div class="item_bar">
            <img class="item_img" src="../../public/img/robot.png" alt="" />
            <div class="item_name">机器人</div>
          </div>
          <div class="item_bar">
            <img class="item_img" src="../../public/img/drive.png" alt="" />
            <div class="item_name">无人驾驶</div>
          </div>
          <div class="item_bar">
            <img class="item_img" src="../../public/img/light.png" alt="" />
            <div class="item_name">智慧交通</div>
          </div>
        </div>
      </div>
      <div class="tab_box">
        <div class="tab_title">创新协同方向</div>
        <div class="article">引入高薪和科研团队入驻</div>
      </div>
    </div>
    <div class="row2">
      <div class="title_name">
        <span>产业布局实施</span
        ><span class="eng">Implementation of industrial</span>
      </div>
      <div class="tab_box">
        <div class="tab_title box_title">产业类型占比统计</div>
        <div class="item_box">
          <div id="loop" class="loop"></div>
        </div>
        <div class="item_box">
          <div class="item_bar1">
            <div class="item_name">产业类型数量</div>
            <div class="item_num">19<span class="fix_name">种</span></div>
          </div>
          <div class="item_bar1">
            <div class="item_name">产业链数量</div>
            <div class="item_num">34<span class="fix_name">个</span></div>
          </div>
          <div class="item_bar1">
            <div class="item_name">引进企业数量</div>
            <div class="item_num">34<span class="fix_name">个</span></div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="right_tab" v-if="over">
    <img src="../../public/img/1_1.png" @click="ShowPlanningArea">
    <img src="../../public/img/1_2.png">
    <img src="../../public/img/1_3.png">
    <img src="../../public/img/1_4.png">
  </div>
  <div class="right">
    <div class="r_row1">
      <div class="title_name">
        <span>园区建筑概览</span
        ><span class="eng">Overview of park buildings</span>
      </div>
      <div class="icon_box">
        <div class="icon_item" v-for="(item, index) in list" :key="index">
          <div class="icon_row">
            <img class="img_box" src="../../public/img/are.png" alt="" />
            <div class="text_num">
              {{ item.num }}<span class="text_name">{{ item.dw }}</span>
            </div>
          </div>
          <div class="btm_row">{{ item.name }}</div>
        </div>
      </div>
    </div>
    <div class="r_row2">
      <div class="title_name">
        <span>园区修建规划</span
        ><span class="eng">Park construction planning</span>
      </div>
      <div class="new_box" v-for="(item, index) in arr" :key="index">
        <img class="tab_img" src="../../public/img/icon.png" alt="" />
        <div class="tab_name">{{ item.name }}</div>
        <div class="tab_time">{{ item.time }}</div>
        <div class="tab_status">{{ item.status }}</div>
      </div>
    </div>
    <div class="r_row3">
      <div class="title_name">
        <span>园区基础设施规划</span
        ><span class="eng">Park infrastructure</span>
      </div>
      <div class="box_i">
        <div class="box_row">
          <img class="box_row_img" src="../../public/img/pie.png" alt="" />
          <div class="box_row_name">
            预计接入基础类型占比数量
            <span class="box_row_num"
              >9</span
            >种
          </div>
        </div>
        <div class="pie_title">基础设施类型占比</div>
        <div class="loop1" id="loop1"></div>
      </div>
    </div>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import { getLoop, getLoop1 } from "@/utils/getecharts"
import CountTo from 'vue3-count-to'
export default {
  components: {
    CountTo
  },
  data() {
    return {
      arr: [
        { name: "一期", time: "2020.09.12-2021.08.07", status: "正在进行" },
        { name: "一期", time: "2020.09.12-2021.08.07", status: "正在进行" },
        { name: "一期", time: "2020.09.12-2021.08.07", status: "正在进行" }
      ],
      list: [
        { num: 890, dw: "平方", name: "园区总面积" },
        { num: 890, dw: "平方", name: "园区总面积" },
        { num: 890, dw: "平方", name: "园区总面积" },
        { num: 890, dw: "平方", name: "园区总面积" },
        { num: 890, dw: "平方", name: "园区总面积" },
        { num: 890, dw: "平方", name: "园区总面积" },
        { num: 890, dw: "平方", name: "园区总面积" },
        { num: 890, dw: "平方", name: "园区总面积" }
      ],
      over:this.$store.state.overstatus
    }
  },
  watch:{
    "$store.state.overstatus": {
      handler: function (newValue, oldValue) {
        this.over = newValue
      },
    }
  },
  created() {

  },
  mounted() {
    echarts.init(document.getElementById("loop")).dispose()
    var myChart = echarts.init(document.getElementById('loop'));
    getLoop(myChart)
    echarts.init(document.getElementById("loop1")).dispose()
    var myChart1 = echarts.init(document.getElementById('loop1'));
    getLoop1(myChart1)
  },
  methods: {
    ShowPlanningArea:function(){
      console.log("ShowPlanningArea")
      document.getElementById('iframe').contentWindow.ShowPlanningArea();
    }
  }
}
</script>

<style scoped>
.left {
  position: absolute;
  left: 30px;
  top: 110px;
}
.right {
  position: absolute;
  right: 30px;
  top: 110px;
}
.row1 {
  width: 407px;
  height: 409px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-left: 30px;
}
.row2 {
  width: 407px;
  height: 469px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-left: 30px;
  margin-top: 20px;
}
.r_row1 {
  width: 407px;
  height: 330px;
  background: url("../../public/img/title.png") no-repeat;
  background-size: cover;
  z-index: -1;
}
.r_row2 {
  width: 407px;
  height: 164px;
  background: url("../../public/img/stitle.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-top: 20px;
}
.r_row3 {
  width: 407px;
  height: 367px;
  background: url("../../public/img/mtitle.png") no-repeat;
  background-size: cover;
  z-index: -1;
  margin-top: 20px;
}
.title_name {
  width: 100%;
  height: 50px;
  font-size: 22px;
  color: white;
  font-weight: bolder;
  box-sizing: border-box;
  padding: 10px 10px 10px 20px;

  z-index: 5;
}
.eng {
  font-size: 14px;
  margin-left: 10px;
}
.tab_box {
}
.tab_title {
  width: 131px;
  height: 20px;
  color: white;
  font-size: 14px;
  background: url("../../public/img/s_title.png") no-repeat;
  background-size: cover;
  box-sizing: border-box;
  line-height: 10px;
  padding-left: 10px;
  margin-left: 10px;
  margin-top: 20px;
}
.item_box {
  display: flex;
}
.item_bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 30px;
  margin-top: 20px;
}
.item_bar1 {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* margin-left: 30px; */
  margin-top: 20px;
}
.item_img {
  width: 50px;
  height: 50px;
}
.item_name {
  font-size: 10px;
  color: white;
}
.article {
  font-size: 16px;
  color: white;
  margin-left: 50px;
  margin-top: 20px;
}
.box_title {
  margin-top: 30px;
}
.loop {
  width: 272px;
  height: 160px;
  margin-left: 40px;
  margin-top: 40px;
}
.item_num {
  margin-top: 10px;
  width: 130px;
  height: 48px;
  background: url("../../public/img/num.png") no-repeat;
  background-size: cover;
  text-align: center;
  line-height: 48px;
  font-size: 25px;
  color: white;
}
.fix_name {
  font-size: 16px;
  line-height: 48px;
}
.icon_item {
  width: 100px;
  height: 65px;
  /* border: 1px solid black; */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: 20px;
  margin-top: 20px;
}
.icon_box {
  display: flex;
  flex-wrap: wrap;
}
.icon_row {
  display: flex;
  align-items: center;
}
.img_box {
  width: 50px;
  height: 50px;
}
.text_num {
  font-size: 21px;
  color: rgba(3, 248, 255, 1);
  margin-left: -20px;
}
.text_name {
  font-size: 13px;
  color: rgba(254, 253, 253, 1);
  margin-left: 5px;
  /* position: absolute;
  top: 18px;
  left: 70px; */
}
.btm_row {
  font-size: 13px;
  color: rgba(254, 253, 253, 1);
  margin-top: -10px;
}
.new_box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-top: 10px;
}
.tab_img {
  width: 20px;
  height: 15px;
}
.tab_name {
  font-size: 14px;
  color: rgba(20, 255, 223, 1);
}
.tab_time {
  font-size: 14px;
  color: white;
}
.tab_status {
  font-size: 14px;
  color: white;
}
.box_row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 30px;
}
.box_row_img {
  width: 30px;
  height: 28px;
}
.box_row_name {
  font-size: 16px;
  color: white;
  margin-left: 10px;
}
.box_row_num {
  font-size: 28px;
  color: rgba(106, 159, 246, 1);
  margin-left: 10px;
  margin-right: 10px;
}
.pie_title {
  font-size: 14px;
  color: white;
  margin-left: 40px;
  margin-top: 20px;
}
.loop1 {
  width: 272px;
  height: 160px;
  margin-left: 20px;
  margin-top: 20px;
}
.right_tab{
  position: absolute;
  right: 480px;
  top: 500px;
  width: 168px;
  height: 300px;
  /* border: 1px solid black; */
}
.right_tab>img{
  width: 150px;
  height: 48px;
  margin-top: 20px;
}
</style>